<template>
 <div id="addteam">
   <van-form @submit="onSubmit">
     <van-cell-group inset>
       <van-field
           v-model="addTeamData.name"
           name="name"
           label="队伍名称"
           placeholder="请输入队伍名称"
           :rules="[{ required: true, message: '请填写队伍名称' }]"
           label-align="center"
       />
       <van-cell-group inset>
         <van-field
             v-model="addTeamData.description"
             rows="4"
             autosize
             label="队伍描述"
             type="textarea"
             maxlength="150"
             placeholder="请输入队伍描述"
             show-word-limit
         />
       </van-cell-group>

       <van-field
           v-model="result"
           is-link
           readonly
           name="datePicker"
           label="选择过期时间"
           placeholder="请选择过期时间"
           @click="showPicker = true"
       />
       <van-popup v-model:show="showPicker" position="bottom">
         <van-date-picker
             @confirm="onConfirm"
             @cancel="showPicker = false"
             :min-date="minDate"
         />
       </van-popup>

       <van-field name="stepper" label="最大人数">
         <template #input>
           <van-stepper v-model="addTeamData.maxNum" max="10" min="3"/>
         </template>
       </van-field>

       <van-field name="radio" label="队伍状态">
         <template #input>
           <van-radio-group v-model="addTeamData.status" direction="horizontal">
             <van-radio name="0">公开</van-radio>
             <van-radio name="1">私有</van-radio>
             <van-radio name="2">加密</van-radio>
           </van-radio-group>
         </template>
       </van-field>

       <van-field
           v-if="Number(addTeamData.status) === 2"
           v-model="addTeamData.password"
           type="password"
           name="password"
           label="房间密码"
           placeholder="请输入房间密码"
           :rules="[{ required: true, message: '请填写密码' }]"
       />
     </van-cell-group>
     <div style="margin: 16px;">
       <van-button round block type="primary" native-type="submit">
         提交
       </van-button>
     </div>
   </van-form>
 </div>

</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {ref} from "vue";
import myAxios from "../plugins/MyAxios.ts";
import {showToast} from "vant";

// 跳转页面对象
const router = useRouter()
// 表单需要的
const initFromData = {
  "description": "",
    "expireTime": "",
    "name": "",
    "maxNum": 3,
    "status": 0,
    "password": ""
}
// 保证initFromData不会被修改，让用户填写的
const addTeamData = ref({...initFromData})


const result = ref('');
const showPicker = ref(false);
const minDate = new Date();
//时间选择器方法
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join('-');
  addTeamData.value.expireTime = result.value
  console.log(addTeamData)
  showPicker.value = false;

};

// 跳转到加入队伍页，提交数据按钮
const onSubmit = async () => {
  // 前端参数处理, status处理成为数字
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status)

  }
  // await 等待响应才获取值
  const res = await myAxios.post("/team/add", postData);
  console.log("添加队伍返回数据", res)
  if (res?.code === 0 && res.data) {
    showToast("添加成功");
    router.push({
      path: '/team',
      replace: true
    })
  } else {
    showToast("添加失败");
  }
}

</script>

<style scoped>

</style>